<template>
  <div class="addressManage">
    <!-- 头部 -->
    <van-nav-bar
      style="background-color:#f2f2f2"
      title="地址管理"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="addressBox">
      <van-swipe-cell v-for="item in list" :key="item.dizhi_id">
        <div class="addressItem">
          <p>
            {{ item.xingming }} {{ item.shouji }}
            <van-tag v-if="item.yn_moren == 1" round type="danger"
              >默认</van-tag
            >
          </p>
          <p class="addressItemAddress">
            {{ item.diqu1 }} {{ item.diqu2 }} {{ item.diqu3 }} {{ item.dizhi }}
          </p>
        </div>
        <template #right>
          <van-button
            square
            type="primary"
            text="编辑"
            style="height: 100%;"
            @click="onEdit(item)"
          />
          <van-button
            square
            text="删除"
            type="danger"
            style="height: 100%;"
            @click="onDelete(item)"
          />
        </template>
      </van-swipe-cell>

      <!-- 数据为空 -->
      <van-empty v-if="list.length === 0" description="暂时没有数据" />
    </div>
    <div class="addBtnBox">
      <van-button type="danger" round block @click="onAdd">新增地址</van-button>
    </div>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
export default {
  name: "addressManage",
  data() {
    return {
      chosenAddressId: "1",
      list: [],
    };
  },
  mounted() {
    this.$toast.loading({
      mask: true,
      duration: 0,
      message: "加载中...",
    });
    this.getAdderss();
  },
  methods: {
    onClickLeft() {
      this.$router.push("/vip");
    },
    // 获取地址
    getAdderss() {
      SERVE.getAdderss({
        params: {
          cs_uid: window.localStorage.u_id,
        },
      })
        .then((res) => {
          this.$toast.clear();
          this.list = res.data;
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err", err);
        });
    },
    onAdd() {
      this.$router.push("/addAdderss");
    },
    onEdit(item) {
      console.log("onEdit", item);
    },
    onDelete(item) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否删除这个地址？",
        })
        .then(() => {
          SERVE.delAdderss({
            params: {
              cs_uid: window.localStorage.u_id,
              cs_dizhiid: item.dizhi_id,
            },
          })
            .then((res) => {
              if (res.data.zt === "yes") {
                this.getAdderss();
              }
              this.$notify({
                type: res.data.zt === "yes" ? "success" : "warning",
                message: res.data.xinxi,
              });
            })
            .catch((err) => {
              console.log("err", err);
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.addressManage {
  .addressBox {
    height: calc(100vh - 106px);
    overflow-y: scroll;
    background-color: #f2f2f2;
    .addressItem {
      background-color: #fff;
      border-radius: 4px;
      width: 96%;
      margin: 0 auto 10px;
      padding: 10px 15px;
      box-sizing: border-box;
      .addressItemAddress {
        font-size: 14px;
        margin-top: 6px;
        word-break: break-all;
      }
    }
  }
  .addBtnBox {
    height: 60px;
    background-color: #fff;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
}
</style>
